<template>
  <view class="add-food">
    <!-- Header with back button and title -->
    <view class="add-food__header">
      <view class="add-food__back" @click="handleBack">
        <text class="add-food__back-icon">←</text>
      </view>
      <view class="add-food__title">{{ mealTitle }}</view>
      <view class="add-food__actions">
        <text class="add-food__action-icon">⋮</text>
      </view>
    </view>
    
    <!-- Meal type selector -->
    <view class="add-food__meal-type">
      <view class="add-food__meal-selector">
        <text class="add-food__meal-text">{{ currentMeal }}</text>
        <text class="add-food__meal-arrow">▼</text>
      </view>
      
      <!-- Search bar -->
      <view class="add-food__search">
        <text class="add-food__search-icon">🔍</text>
        <text class="add-food__search-placeholder">请输出食材名称进行搜索</text>
      </view>
    </view>
    
    <!-- Food categories -->
    <view class="add-food__categories">
      <view 
        v-for="(category, index) in categories" 
        :key="index"
        class="add-food__category"
        :class="{ 'add-food__category--active': currentCategory === category.name }"
        @click="currentCategory = category.name"
      >
        <text class="add-food__category-text">{{ category.name }}</text>
      </view>
    </view>
    
    <!-- Food list -->
    <scroll-view class="add-food__food-list" scroll-y>
      <view 
        v-for="(food, index) in filteredFoods" 
        :key="index"
        class="food-item"
      >
        <view class="food-item__left">
          <image class="food-item__image" :src="food.image" mode="aspectFill"></image>
        </view>
        <view class="food-item__content">
          <view class="food-item__name">{{ food.name }}</view>
          <view class="food-item__calories">{{ food.calories }} 千卡/100克</view>
        </view>
        <view class="food-item__right">
          <view 
            class="food-item__add"
            :class="{ 'food-item__add--selected': food.selected }"
            @click="toggleFoodSelection(index)"
          >
            <text v-if="food.selected" class="food-item__check">✓</text>
            <text v-else class="food-item__plus">+</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- Food detail modal -->
    <view class="food-detail" v-if="selectedFood">
      <view class="food-detail__header">
        <view class="food-detail__food">
          <image class="food-detail__image" :src="selectedFood.image" mode="aspectFill"></image>
          <view class="food-detail__info">
            <view class="food-detail__name">{{ selectedFood.name }}</view>
            <view class="food-detail__calories">{{ selectedFood.calories }} 千卡/100克</view>
          </view>
        </view>
        <view class="food-detail__nutrients">
          <view class="food-detail__nutrient">
            <text class="food-detail__nutrient-name">热量 (千卡)</text>
            <text class="food-detail__nutrient-value">{{ selectedFood.nutrients.calories }}</text>
          </view>
          <view class="food-detail__nutrient">
            <text class="food-detail__nutrient-name">碳水 (克)</text>
            <text class="food-detail__nutrient-value">{{ selectedFood.nutrients.carbs }}</text>
          </view>
          <view class="food-detail__nutrient">
            <text class="food-detail__nutrient-name">蛋白质 (克)</text>
            <text class="food-detail__nutrient-value">{{ selectedFood.nutrients.protein }}</text>
          </view>
          <view class="food-detail__nutrient">
            <text class="food-detail__nutrient-name">脂肪 (克)</text>
            <text class="food-detail__nutrient-value">{{ selectedFood.nutrients.fat }}</text>
          </view>
        </view>
      </view>
      <view class="food-detail__portion">
        <view class="food-detail__portion-value" @click="showNumberPad">{{ selectedFood.portion }} 克</view>
      </view>
    </view>
    
    <!-- Number pad component -->
    <number-pad 
      :visible.sync="numberPadVisible"
      title="米饭"
      :initial-value="selectedFood ? selectedFood.portion.toString() : '100'"
      :units="['克', '碗', '份']"
      default-unit="克"
      hint="采品标准重量：460克"
      @confirm="handlePortionConfirm"
    />
  </view>
</template>

<script>
import NumberPad from '@/components/number-pad/index.vue';

export default {
  components: {
    NumberPad
  },
  data() {
    return {
      // Mock data
      mealTitle: '5月29日午餐',
      currentMeal: '午餐',
      currentCategory: '常见',
      categories: [
        { name: '常见' },
        { name: '主食' },
        { name: '肉蛋奶' },
        { name: '豆类坚果' }
      ],
      foods: [
        {
          name: '米饭',
          calories: '120',
          image: '/static/logo.png',
          selected: false,
          portion: 100,
          nutrients: {
            calories: 58,
            carbs: 12.95,
            protein: 1.30,
            fat: 0.15
          }
        },
        {
          name: '西红柿炒鸡蛋',
          calories: '120',
          image: '/static/logo.png',
          selected: true,
          portion: 100,
          nutrients: {
            calories: 120,
            carbs: 5.2,
            protein: 8.5,
            fat: 7.3
          }
        },
        {
          name: '米饭',
          calories: '120',
          image: '/static/logo.png',
          selected: false,
          portion: 100,
          nutrients: {
            calories: 58,
            carbs: 12.95,
            protein: 1.30,
            fat: 0.15
          }
        }
      ],
      selectedFood: null,
      numberPadVisible: true
    };
  },
  computed: {
    filteredFoods() {
      // In a real app, this would filter based on search and category
      return this.foods;
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack();
    },
    toggleFoodSelection(index) {
      // Toggle selection
      this.foods[index].selected = !this.foods[index].selected;
      
      // If selected, show detail view
      if (this.foods[index].selected) {
        this.selectedFood = this.foods[index];
      } else if (this.selectedFood === this.foods[index]) {
        this.selectedFood = null;
      }
    },
    showNumberPad() {
      this.numberPadVisible = true;
    },
    handlePortionConfirm({ value, unit }) {
      if (this.selectedFood) {
        this.selectedFood.portion = value;
        // In a real app, you would also update the unit and recalculate nutrients
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.add-food {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
  
  &__header {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;
  }
  
  &__back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  &__back-icon {
    font-size: 40rpx;
  }
  
  &__title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: bold;
  }
  
  &__actions {
    width: 60rpx;
    text-align: right;
  }
  
  &__meal-type {
    padding: 20rpx 30rpx;
    background-color: #fff;
  }
  
  &__meal-selector {
    display: inline-flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
  }
  
  &__meal-text {
    font-size: 28rpx;
    margin-right: 10rpx;
  }
  
  &__meal-arrow {
    font-size: 24rpx;
    color: #999;
  }
  
  &__search {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 40rpx;
  }
  
  &__search-icon {
    margin-right: 10rpx;
    color: #999;
  }
  
  &__search-placeholder {
    color: #999;
    font-size: 28rpx;
  }
  
  &__categories {
    display: flex;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: 2rpx solid #f0f0f0;
  }
  
  &__category {
    padding: 10rpx 20rpx;
    margin-right: 20rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &--active {
      color: #00c2b3;
      font-weight: bold;
      
      &:after {
        content: '';
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #00c2b3;
        border-radius: 2rpx;
      }
    }
  }
  
  &__food-list {
    flex: 1;
    background-color: #fff;
    padding: 0 30rpx;
  }
}

.food-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
  
  &__left {
    margin-right: 20rpx;
  }
  
  &__image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
  }
  
  &__content {
    flex: 1;
  }
  
  &__name {
    font-size: 30rpx;
    margin-bottom: 10rpx;
  }
  
  &__calories {
    font-size: 26rpx;
    color: #999;
  }
  
  &__right {
    margin-left: 20rpx;
  }
  
  &__add {
    width: 50rpx;
    height: 50rpx;
    border-radius: 25rpx;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    
    &--selected {
      background-color: #00c2b3;
      color: #fff;
    }
  }
}

.food-detail {
  background-color: #fff;
  border-top: 2rpx solid #f0f0f0;
  padding: 30rpx;
  
  &__header {
    margin-bottom: 30rpx;
  }
  
  &__food {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
  }
  
  &__image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
    background-color: #f5f5f5;
  }
  
  &__name {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 6rpx;
  }
  
  &__calories {
    font-size: 26rpx;
    color: #999;
  }
  
  &__nutrients {
    display: flex;
    justify-content: space-between;
    background-color: #f9f9f9;
    padding: 20rpx;
    border-radius: 10rpx;
  }
  
  &__nutrient {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  &__nutrient-name {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 6rpx;
  }
  
  &__nutrient-value {
    font-size: 28rpx;
    font-weight: bold;
  }
  
  &__portion {
    display: flex;
    justify-content: center;
  }
  
  &__portion-value {
    font-size: 32rpx;
    color: #00c2b3;
    padding: 10rpx 30rpx;
    border: 2rpx solid #00c2b3;
    border-radius: 30rpx;
  }
}
</style>